/*
 * 总测肤统计统计搜索
 * @Author: zfx
 * @Date: 2018-07-16 14:00:04
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>
	.has-padding {
		padding-right: 10px;
	}
	.no-padding {
		padding-right: 0;
	}
	.type-lists {
		display: flex;
		width: 186px;
		height: 32px;
		justify-content: space-between;
		& > div {
			position: relative;
			width: 32px;
			height: 32px;
			border-radius: 50%;
			text-align: center;
			box-sizing: border-box;
			cursor: pointer;
			transition: all .3s 0s ease;
			border: 1px solid #ccc;
			&.selected {
				color: #fff;
				background-color:#5fc0f2;
				border-color: transparent;
			}
			&:hover {
				color: #fff;
				background-color: #5fc0f2;
			}
			&:active {
				&::after {
					top: 0;
					bottom: 0;
					left: 0;
					right: 0;
					opacity: .5;
					transition: 0s;
				}
			}
			&::after {
				content: '';
				position: absolute;
				top: -10px;
				bottom: -10px;
				left: -10px;
				right: -10px;
				background-color: #5fc0f2;
				background-repeat: no-repeat;
				background-position: 50%;
				border-radius: 50%;
				opacity: 0;
				transition: all .3s;
			}
		}
	}

</style>
<template>
	<Form
		ref="formInline"
		:style="{ 'text-align': position }"
		:class="[ position === 'center' ? 'no-padding' : 'has-padding' ]"
		inline
		@keydown.native.enter.prevent="confirmSearch">
		<Form-item>
			<div class="type-lists">
				<div
					v-for="item in types"
					:key="item.value"
					:title="item.label"
					:class="[selected_item === item.value ? 'selected': '', 'overflow-ellipsis']"
					@click="confirmSearch(item.value)">{{ item.label }}</div>
			</div>
		</Form-item>

		<!-- <Form-item>
			<Button
				type="primary"
				@click="confirmSearch">
				{{ $t('common.search') }}
			</Button>
		</Form-item> -->
	</Form>
</template>

<script>
export default {
	props: {
		position: {
			type: String,
			default() {
				return 'center';
			},
		},
	},
	data() {
		return {
			types: [
				{
					value: 'day',
					label: this.$t('home.day'),
				},
				{
					value: 'week',
					label: this.$t('home.weeks'),
				},
				{
					value: 'month',
					label: this.$t('home.month'),
				},
				{
					value: 'year',
					label: this.$t('home.year'),
				},
			],
			selected_item: 'day',
		};
	},
	methods: {
		/**
         * 确认搜索
         * @return {undefined}
         */
		confirmSearch(value) {
			if (this.selected_item === value) return;
			this.selected_item = value;
			const param = {
				group_type: value,
			};

			this.$emit('search', param);
		},
	},
};
</script>
